import {Component} from 'angular2/core';

@Component({
    selector: 'tip',
    template: `<div class="tip" [ngStyle]="{'display': isShow?'block':'none', 'opacity': opacity}">
        <div class="content">
            <p>{{text}}</p>
        </div>
    </div>
    <button (click)="show()">show</button>`,
    styles: [`
        .tip {
            position: fixed;
            top: 30px;
            left: 400px;
            background-color: #ccc;
            border-radius: 4px;
            transition: opacity .4s ease;
        }
        .content {
            
        }
        .content p {
            margin: 10px 6px;
        }
    `]
})
export class TipComponent {
    public text: String;
    private isShow: Boolean = false;
    private opacity: Number = 0;
    
    show(text: String = "This is default text") {
        this.text = text;
        this.isShow = true;
        let self = this;
        setTimeout(function() {
            self.opacity = 1;
        }, 10);
        setTimeout(function() {
            self.opacity = 0;
            setTimeout(function() {
                self.isShow = false;
            }, 400);
        }, 2000);
    }
}
